<template>
  <el-form :model="form" :rules="rules" ref="formRef" label-width="100px" class="login-form">
    <div class="overlay"></div>
    <el-row class="login-container">
      <h2>登录</h2>
      
      <el-input style="height: 50px; margin-top: 20px;"
        v-model="form.account"
        placeholder="请输入账户"
        required
        name="account"
      ></el-input>

      <el-input style="height: 50px; margin-top: 20px;"
        type="password"
        v-model="form.password"
        placeholder="请输入密码"
        required
        name="password"
      ></el-input>

      <el-form-item class="button-container">
        <el-button class="button" 
        type="primary" 
        @click="handleSubmit">登录</el-button>
      </el-form-item>

      <div class="footer">
        <p>没有账号？<router-link to="/register">注册</router-link></p>
        <p><router-link to="/losePWD">忘记密码？</router-link></p>
        <p><router-link to="/admin/login">管理员登录</router-link></p>
      </div>
    </el-row>
  </el-form>
</template>

<script lang="ts">
import axios from "axios";
import { useUserStore } from '../store/useUserstore';
import { jwtDecode } from "jwt-decode";
import router from "../router";

export default {
  name: "Login",
  data() {
    return {
      form: {
        account: "",
        password: "",
      },
      rules: {
        account: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          // 发送登录请求
          this.login();
        } else {
          this.$message.error("表单验证失败");
        }
      });
    },
    async login() {
      try {
        const response = await axios.post("http://26.239.98.70:3000/api/login", {
          account: this.form.account,
          password: this.form.password,
        });

        // 假设响应中有一个字段 status 判断登录是否成功
        if (!response.data.status) {
          this.$message.success("登录成功");
          const token = response.data.token;
          const userStore = useUserStore();

          // 使用 jwt-decode 解码 token
          const decodedToken = jwtDecode(token);
          console.log(decodedToken);

          userStore.setToken(token);
          localStorage.setItem("token", token);

          userStore.setUserInfo(decodedToken);
          localStorage.setItem("userInfo", JSON.stringify(decodedToken));

          // console.log(userStore.userInfo.UserID+"登录成功");

          router.push("/home").then(() => {
            window.location.reload();
          });
        } else {
          this.$message.error("账号或密码错误");
        }
      } catch (error) {
        console.error("登录失败", error);
        this.$message.error("登录请求失败");
      }
    },
  },
  mounted() {
    document.body.style.fontFamily = "'Noto Sans SC', sans-serif";
    document.body.style.background =
      "url('/src/assets/login.jpg') no-repeat center center fixed";
    document.body.style.backgroundSize = "cover";
    document.body.style.margin = "0";
    document.body.style.padding = "0";
    document.body.style.display = "flex";
    document.body.style.justifyContent = "center";
    document.body.style.alignItems = "center";
    document.body.style.height = "100vh";
    document.body.style.color = "white";
    document.body.style.overflow = "hidden";
  },
};
</script>

<style src="../assets/style/Login.css" scoped></style>

